<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Nilufar.Love.BubbleDance</title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			height: 100%;
		}

		body {
			height: 100%;
			background-color: black;
		}

		#draw {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<canvas id="draw" ondblclick="fullscreen();"></canvas>
</body>
<script src="../static/js/ecanvas.js"></script>
<script>
	function fullscreen() {
		if (document.fullscreenElement ||
			document.mozFullScreenElement ||
			document.webkitFullscreenElement ||
			document.msFullscreenElement) {
			if (document.exitFullscreen) {
				document.exitFullscreen();
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.webkitExitFullscreen) {
				document.webkitExitFullscreen();
			} else if (document.msExitFullscreen) {
				document.msExitFullscreen();
			}
		} else {
			if (document.documentElement.requestFullscreen) {
				document.documentElement.requestFullscreen();
			} else if (document.documentElement.mozRequestFullScreen) {
				document.documentElement.mozRequestFullScreen();
			} else if (document.documentElement.webkitRequestFullscreen) {
				document.documentElement.webkitRequestFullscreen();
			} else if (document.documentElement.body.msRequestFullscreen) {
				document.documentElement.body.msRequestFullscreen();
			}
		}
	}

	document.addEventListener('keypress', function (e) {
		fullscreen();
	});
</script>
<script type="text/javascript">
	var width = Math.max(window.innerWidth, window.outerWidth, screen.width);
	var height = Math.max(window.innerHeight, window.outerHeight, screen.height);

	var c = document.getElementById('draw');
	var ctx = c.getContext("2d");

	var image = document.createElement('canvas');
	var imageCtx = image.getContext('2d');
	image.width = width;
	image.height = height;
	var count = 0;

	window.onresize = () => {
		drawer.resize();
		drawer.refresh();
	}

	var randomer = {
		randomInt: () => Math.round(Math.random() * Math.pow(10, 4)),
		randomX: () => randomer.randomInt() % (width + 1),
		randomY: () => randomer.randomInt() % (height + 1),
		randomColor: () => 'rgba(' + randomer.randomInt() % 256 + ',' + randomer.randomInt() % 256 + ',' + randomer.randomInt() % 256 + ',' + Math.random() + ')'
	}

	var drawer = {
		resize: () => {
			c.width = document.documentElement.clientWidth;
			c.height = document.documentElement.clientHeight;
		},
		changeBackgroundColor: () => c.style.backgroundColor = randomer.randomColor(),
		drawPoint: () => {
			imageCtx.beginPath();
			imageCtx.arc(randomer.randomX(), randomer.randomY(), 1, 0, Math.PI * 2, true);
			imageCtx.closePath();

			imageCtx.fillStyle = randomer.randomColor();
			imageCtx.fill();
		},
		drawArc: () => {
			imageCtx.beginPath();	// 开始
			imageCtx.arc(randomer.randomX(), randomer.randomY(), randomer.randomInt() % count++ + 5, 0, Math.PI * 2, true);
			imageCtx.closePath();	// 闭合

			imageCtx.strokeStyle = randomer.randomColor();	// 画笔色
			imageCtx.fillStyle = randomer.randomColor();	// 填充色
			imageCtx.stroke();	// 绘画
			imageCtx.fill();	// 填充

			if (count > 1314) {
				count = 0;
				imageCtx.clearRect(0, 0, width, height);
			}
		},
		refresh: () => {
			ctx.clearRect(0, 0, c.width, c.height);
			ctx.drawImage(image, window.screenX, window.screenY, c.width, c.height, 0, 0, c.width, c.height);
		}
	}

	var runner = {
		run: () => {
			drawer.resize();

			setInterval(() => {
				drawer.changeBackgroundColor();
			}, 1000);

			setInterval(() => {
				drawer.drawPoint();
				drawer.refresh();
			}, 10);

			setInterval(() => {
				drawer.drawArc();
				drawer.refresh();
			}, 500);
		}
	}

	// runner.run();

	var tCanvas = new TCanvas(width, height);

	setInterval(() => {
		if (count == width) {
			count = 0;
		}
		ctx.clearRect(0, 0, width, height);
		tCanvas.strokeStyle(randomer.randomColor()).drawPoint(randomer.randomX(), randomer.randomY());
		tCanvas.drawTo(ctx, count, 0, width, height, 0, 0, width, height);
		tCanvas.drawTo(ctx, width - count, 0, width, height, width - count, 0, width, height);
		count++;
	}, 1000 / 24);

</script>

</html>